<script setup lang="ts">
import { reactive } from 'vue';
const props = withDefaults(
  defineProps<{
    items: { name: string; value: string }[];
    checkboxValues: string[];
  }>(),
  {
    items: () => [],
    checkboxValues: () => [],
  },
);
const state = reactive<{
  checkboxValues: string[];
}>({ checkboxValues: [] });

const emits = defineEmits<{
  (e: 'onSelected', checkboxValues: string[]): void;
}>();

if (props.checkboxValues && props.checkboxValues.length > 0) {
  state.checkboxValues = props.checkboxValues;
}
/**
 * 点击处理
 */
function changeHandle() {
  emits('onSelected', state.checkboxValues);
}
</script>
<template>
  <scroll-view
    class="app-popup__wrapper checkbox-list-selector"
    :style="{ height: '64vh', backgroundColor: '#fff' }"
    :scroll-y="true"
    :lower-threshold="100"
  >
    <view class="checkbox-list-selector__wrapper">
      <nut-checkbox-group
        class="checkbox-list-selector__checkbox-group"
        v-model:model-value="state.checkboxValues"
        @change="changeHandle"
      >
        <view v-for="item in items" :key="item.value">
          <nut-checkbox :label="item.value" icon-size="16" class="checkbox-list-selector__content">
            <text>{{ item.name }}</text>
          </nut-checkbox>
          <view class="checkbox-list-selector__line"></view>
        </view>
      </nut-checkbox-group>
    </view>
  </scroll-view>
</template>
<style lang="scss">
.checkbox-list-selector {
  &__wrapper {
    padding: 40px 0;
    background-color: '#fff';
  }
  &__checkbox-group {
    display: block;
    border-top: #eee solid 0.5px;
  }

  &__content {
    min-height: 100px;
  }
  &__line {
    margin-left: 40px;
    border-bottom: #eee solid 0.5px;
  }
}
</style>
